<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 300px;
            height: 300px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            margin: 100px auto;
            transition: all .2s linear;
        }
        ul:hover{
            width: 400px;
            height: 400px;
        }
        li{
            width: 14.5%;
            height: 14.5%;
            display: flex;
            align-items: center;
            justify-content: center;
            
        }
        li:hover{
            transform: scale(1.2);
        }
        div{
            width: 300px;
            margin: 20px auto;
            text-align: center;
            letter-spacing: 5px;
            
        }
        p{
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div>
        <span></span>
        <button onclick="listLi()">换一个</button> 
     </div>
    <div>
        <p></p>
    </div>
   <ul></ul>
   <script>
    // 页面加载完成后 创建36个li标签 每个标签都有一个随机的成语文字
    // span标签中会有一个随机成语 p标签清空

    // 再换一下,li在重新渲染一遍 每个标签有新的随机成语文字
    //  span标签中会有一个随机成语 p标签清空

    // 当点击li; 获取li中文字,现在是p标签中; p标签内文字如果有四个字判断跟span标签的内容是否一致;
    // span标签标签中随机成语 p标签清空  li标签 每个标签都有一个随机的成语文字

    var str = "不吐不快、海阔天空、情非得已、满腹经纶、兵临城下、春暖花开、插翅难逃、黄道吉日、天下无双";
    // 得到一个没有顿号的成语文字
    var reg = /、/g;
    var str2 = str.replace(reg,"");
    // console.log(str2);
    // console.log(str2.length); //36

    var arrcheng = str.split(reg);
    // console.log(arrcheng);

    // 获取一个0-35之间随机打乱的数组(0-35)
    function mathArr(){
        var arr = [];
        for(var i = 0; i < 1000;i++){
            var num = Math.floor(Math.random() * str2.length); //0-35
            if(arr.indexOf(num) == -1){
                arr.push(num);
            }
            if(arr.length == str2.length) return arr;
        }
    }

    // 随机的一个颜色
    function rgb(){
        var r = Math.floor(Math.random() * 255); //0-254
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        return `rgb(${r},${g},${b})`;
    }


    var ul = document.querySelector("ul");
    var span = document.querySelector("span");
    var p = document.querySelector("p");
    // 
    listLi()
    // 
    function listLi(){
        var arr = mathArr();
        // console.log(arr);
        var str3 = "";
        for(var i = 0;i < arr.length;i++){
            str3 += `<li style="box-shadow: 0 0 4px 0 ${rgb()};">${str2[arr[i]]}</li>`
        }
        ul.innerHTML = str3;

        var n = Math.floor(Math.random() * arrcheng.length); //
        span.innerHTML = arrcheng[n];

        p.innerHTML = ""

    }
   
   </script>
</body>
</html>